<template>
 <div class="test2-all">
   <div id="webgl"></div>
 </div>
</template>
<script setup lang="ts">
import {ref, onMounted, nextTick, watch, reactive} from 'vue'
import * as THREE from 'three';
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";

const post = reactive({
  x:300,
  y:500,
  z:100,
})
const three = (x:number, y:number, z:number):void => {
  const scene = new THREE.Scene();
//创建一个长方体几何对象Geometry
  const geometry = new THREE.SphereGeometry(100, 100, 100)
// AxesHelper：辅助观察的坐标系
  const axesHelper = new THREE.AxesHelper(200);
  scene.add(axesHelper);

//创建一个材质对象Material
  const material = new THREE.MeshBasicMaterial({
    color: 0x0000ff, //设置材质颜色
    transparent: false,//开启透明
    opacity: 0.5,//设置透明度
  });
// 两个参数分别为几何体geometry、材质material
  const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标，默认是坐标原点
  mesh.position.set(100, 100, 100);
  scene.add(mesh);
  //点光源：两个参数分别表示光源颜色和光照强度
// 参数1：0xffffff是纯白光,表示光源颜色
// 参数2：1.0,表示光照强度，可以根据需要调整
  const pointLight = new THREE.PointLight(0xffffff, 1.0);
  pointLight.position.set(100, 60, 50);
  scene.add(pointLight); //点光源添加到场景中
  const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
  scene.add(pointLightHelper);
// 定义相机输出画布的尺寸(单位:像素px)
  const width = 800; //宽度
  const height = 500; //高度
// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
  const camera = new THREE.PerspectiveCamera(60, width / height, 1, 3000);
// 根据需要设置相机位置具体值
  camera.position.set(post.x, post.y, post.z);
//相机观察目标指向Threejs 3D空间中某个位置
  camera.lookAt(100, 100, 100); //坐标原点
  camera.lookAt(mesh.position);//指向mesh对应的位置
// 创建渲染器对象
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
  renderer.render(scene, camera);
  let elementById = document.getElementById('webgl');
  elementById.appendChild(renderer.domElement);
  // 设置相机控件轨道控制器OrbitControls
  const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
  controls.addEventListener('change', function () {
    renderer.render(scene, camera); //执行渲染操作
  });//监听鼠标、键盘事件


}
watch(()=>post.x,(x)=>{
  three(x,post.y,post.z);
})
onMounted(()=>{
  three(post.x,post.y,post.z);

})
</script>
<style scoped>
.test2-all{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vh;
  flex-direction: column;
}
.slider-demo-block {
  display: flex;
  align-items: center;
}
</style>